<template>
	<view class="page">
		<view class="header">
			<view class="title">
				演出图片
			</view>
			<picker @change="change" :value="value" :range="range" class="picker">
				<view class="uni-input">{{range[value]}}</view>
				<view class="arrow"></view>
			</picker>
		</view>
		<WaterfallsFlow :wfList='list' @itemTap="itemTap" />
		<!-- 实现图片组件 -->
		<PreviewBox v-if="isPreview" :url='url' :content='content' :isContent="isContent"
			@touchmove.stop.prevent="moveHandle" @toClose="toClose" />
	</view>
</template>

<script>
	import WaterfallsFlow from '../../components/photo/WaterfallsFlow.vue'
	import PreviewBox from '../../components/photo/PreviewBox.vue'
	import {
		getPhoto
	} from '../../api/PhotoPage/index.js'

	export default {
		components: {
			WaterfallsFlow,
			PreviewBox,
		},
		onLoad() {
			//开启刷新事件
			uni.startPullDownRefresh({
				success() {
					console.log('开始刷新成功')
				},
				fail(err) {
					console.log(err)
				},
			})
		},
		async onPullDownRefresh() {
			//请求数据
			try {
				console.log(this.value)
				this.current = 1
				this.list = []
				await this.getList(this.value, this.current, this.size)
			} catch (err) {
				console.log(err)
				return
			}
			// 结束上刷新
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		onReachBottom() {
			console.log('到底了')
			// 模拟触底刷新
			setTimeout(async () => {
				this.current = this.current + 1
				await this.getList(this.value, this.current, this.size)
			}, 1000)
		},
		data() {
			return {
				index: 0,
				list: [],
				requiredData: [],
				isPreview: false,
				url: 'http://localhost:3000/img/1.jpg',
				content: '这是测试',
				isContent: true,
				value: 3,
				range: ["纪录片", "表演", "表演", "全部"],
				current: 1,
				size: 10
			}
		},
		methods: {
			async getList(type, current, size) {
				let body;
				if (type === 3 || type === '3') {
					body = {
						current,
						size
					}
				} else {
					body = {
						type,
						current,
						size
					}
				}
				console.log(body)
				await getPhoto(body).then(res => {
					console.log(res)
					//只要加一次即可
					if (res.data.records && this.requiredData.length === 0) {
						this.list.push(...res.data.records)
					}
					console.log('请求成功')
				})
			},
			//点击查看图片详情
			itemTap(item) {
				this.isPreview = true
				this.url = item.imageUrl.replace(/\r\n/g, '')
				this.content = item.description
				console.log(item);
			},
			toClose(item) {
				this.isPreview = false
			},
			//下拉选择器触发函数
			change(e) {
				this.value = e.detail.value
				uni.startPullDownRefresh({})
			},
			// js 触发的函数:置空即可
			moveHandle: function() {},
		},
		computed: {
			// requiredData:()=> this.$store.commit('home/getCommitList')
		},
	}
</script>

<style scoped>
	.header {
		display: flex;
		justify-content: space-evenly;
		background-color: #f2f2f2;
		margin: 10rpx;
		letter-spacing: 5rpx;
	}

	.title {
		margin-right: 110rpx;
		font-size: 50rpx;
	}

	.picker {
		display: flex;
		justify-content: space-between;
		width: 300rpx;
		border: 1rpx solid #ccc;
		border-radius: 5rpx;
		padding: 10rpx;
		position: relative;
		overflow: hidden;
		/* 添加阴影效果 */
	}

	.uni-input {
		text-align: center;
		font-size: 39rpx;
		color: #333;
		margin-bottom: 4rpx;
	}

	.arrow {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10rpx 10rpx 0 10rpx;
		border-color: #777 transparent transparent transparent;
		position: absolute;
		top: 50%;
		right: 10rpx;
		transform: translateY(-50%);
	}

	/* 添加过渡效果 */
	.picker {
		transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
		/* 添加阴影过渡效果 */
	}

	.picker:focus {
		border-color: #007bff;
		box-shadow: 0 4rpx 8rpx rgba(0, 123, 255, 0.2);
		/* 添加聚焦时的阴影效果 */
	}
</style>